<template>
  <div class="body">
    <header>
      <div class="logo">文创产品</div>
      <nav>
        <ul>
          <li><a href="">首页</a></li>
          <li><a href="">咨询</a></li>
          <li><a href="">联系</a></li>
        </ul>
      </nav>
    </header>
    <div class="detail">
    <el-button @click="back" type="primary" round style="margin: 20px 40px;">返回</el-button>
        <div class="images">
            <img src="../../../assets/images/book.png" alt="">
        </div>
        <div class="text">
            <h1>广生桥本</h1>
            <p>
                广生桥是三板村乡村振兴工作的重要成果之一，长约22米，宽5.6米，粗粝的石栏杆和石桥面，透出着一股浓浓的岭南风情。横跨红旗河两岸的广生桥，在河面上投下古朴的倒影，加之岸上的杨柳，形成了一道独特的风景。
            </p>
            <el-row :gutter="20">
                <el-col :span="4">
                    <el-statistic title="价格">
                        <template slot="formatter">
                        ￥20
                        </template>
                    </el-statistic>
                </el-col>
                <el-col :span="4">
                    <el-statistic title="简约度">
                        <template slot="formatter">
                        90%
                        </template>
                    </el-statistic>
                </el-col>
                <el-col :span="4">
                    <el-statistic title="含蓄度">
                        <template slot="formatter">
                        60%
                        </template>
                    </el-statistic>
                </el-col>
                <el-col :span="4">
                    <el-statistic title="时尚度">
                        <template slot="formatter">
                        30%
                        </template>
                    </el-statistic>
                </el-col>
                <el-col :span="4">
                    <el-statistic title="文化特性深度">
                        <template slot="formatter">
                        80%
                        </template>
                    </el-statistic>
                </el-col>
            </el-row>
        </div>
        <div class="click">
            <el-button type="danger" round>加入购物车</el-button>
            <el-button type="success" round>结算</el-button>
        </div>
    </div>
    <Foot></Foot>
  </div>
</template>

<script>
import Foot from '@/components/Footer'
export default {
    name:'WcMore',
    components:{
        Foot
    },
    data() {
        return {
            value1:'￥20',
            value2: 1314,
            title: "增长人数",
        }
    },
    methods:{
        back(){
            this.$router.push('/wenchuang')
        }
    }
}
</script>

<style scoped lang="less">
li{
    list-style: none;
}
.body {
  margin: 0;
  font-family: Poppins;
}
header {
  width: 80%;
  max-width: 90%;
  display: flex;
  justify-content: space-between;
  margin: auto;
  height: 50px;
  align-items: center;
}
header .logo {
  font-weight: bold;
}
header nav li {
  float: left;
}
header nav a {
  margin-left: 30px;
  text-decoration: none;
  color: #555;
  font-weight: 500;
}
.detail{
    width: 80%;
    margin: 10px auto;

    .images{
        float: left;
        width: 45%;
        margin: 10px 5px;

        img{
            width: 100%;
            margin: 10px 0;
        }
    }

    .text{
        text-align: right;
        float: right;
        width: 50%;
    }

    .click{
        text-align: right;

        .el-button.is-round{
            margin: 20px 5px;
        }
    }
}
</style>